<template>
	<div class="searchPage">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:centerUrl='dataArr.centerUrl'
		/>
		<div class="searchContent">
			<div class="hotSearch">
				<p>热门搜索</p>
				<ul>
					<li v-for="(item,index) in cityhots" :key="index" ><span>{{item.name}}</span></li>
				</ul>
			</div>
			<div class="historySearch">
				<p>历史搜索</p>
				<button>清除搜索记录</button>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from './components/homeheader'
import CityHot from "../../assets/data/hotcity.json"
export default{
	name:'searchPage',
	components:{
		NewsHeader
	},
	data(){
		return{
				cityhots:CityHot,
				dataArr:{
					isInput:true,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"搜索您想要的区域",
					aimUrl:'/layout/home',
					centerUrl:'/homecurrent'
			}
		}
	}
}
</script>
<style scoped lang="less">
.searchPage{
	width: 100%;
	height: 1334 / 100rem;
	background-color: #efefef;
	overflow: hidden;
	.searchContent{
		margin-top:88 / 100rem;
		width: 100%;
		height: 100%;
		padding: 0 20 / 100rem;
		box-sizing: border-box;
		.hotSearch{
			width: 710 / 100rem;
			height: auto;
			border-radius: 8 / 100rem;
			margin-top: 5 / 100rem;
			padding:56 / 100rem 30 / 100rem 88 / 100rem 30 / 100rem;
			background-color: #ffffff;
			box-sizing: border-box;
			overflow: hidden;
			p{
				color: rgba(0, 0, 0, 0.8);
				font-size: 30 / 100rem;
				font-weight: 600;
				font-family: '微软雅黑';
				margin-left: 6 / 100rem;
				margin-bottom: 54 / 100rem;
			}
			ul li{
					float: left;
					width: 138 / 100rem;
					height: 50 / 100rem;
					text-align: center;
					line-height: 50 / 100rem;
					border-radius: 8 / 100rem;
					background-color: rgba(0, 0, 0, 0.1);
					margin-bottom: 36 / 100rem;
					span{
						color:rgba(0, 0, 0, 0.8);
						font-size: 26 / 100rem;
					}
			}
			ul li:nth-child(2),ul li:nth-child(6){
				margin-left: 30 / 100rem;
				margin-right: 30 / 100rem;
			}
			ul li:nth-child(4),ul li:nth-child(8){
				margin-left: 30 / 100rem;
			}
			ul li:last-child{
				margin-bottom: 0;
			}
		}
		.historySearch{
			p{
				color: rgba(0, 0, 0, 0.8);
				font-size: 30 / 100rem;
				font-weight: 600;
				font-family: '微软雅黑';
				margin-left: 30 / 100rem;
				margin-bottom: 20 / 100rem;
				margin-top: 20 / 100rem;
			}
			button{
				width: 670 / 100rem;
				height: 80 / 100rem;
				background-color: #ffffff;
				color: rgba(0, 0, 0, 0.8);
				font-size: 30 / 100rem;
				font-weight: 700;
				border-radius: 8 / 100rem;
				border:none;
				margin-left: 20 / 100rem;
				margin-right: 30 / 100rem;
			}
		}
	}	
}

</style>